<template>
  <div class="year">
    <div>
      <div class="table">
        <ul class="lz">
          <li v-for="(item, index) of currentPageData" :key="index">
            <div
              class="lz_left"
              style="width:352px;height:242px;  cursor: pointer;"
              :style="{backgroundImage:`url(${IP}${item.thumb})`}"
              @click="more(item)"
            ></div>
            <div class="lz_right">
              <p class="title1" @click="more(item)">{{ item.title }}</p>
              <p class="content1">
                <span>活动时间&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                <span>{{ item.startDates }}-{{ item.endDates }}</span>
              </p>
              <p class="content1" @click="more(item)">
                <span>报名时间&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                <span>{{ item.applyStartDates }}-{{ item.applyEndDates }}</span>
              </p>
              <p class="content1" @click="more(item)">
                <span>活动地点&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                <span>{{ item.address }}</span>
              </p>
              <p class="content1" @click="more(item)">
                <span>联系电话&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                <span>{{ item.tel }}</span>
              </p>

              <p class="content1" @click="more(item)">
                <span>剩余票数&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                <span>{{ item.balance }}</span>
              </p>

              <p
                class="gray"
                :class="{ more: item.button_zi == '立即报名' }"
                v-if="item.sumCount != 0"
                @click="tankuang(item.id, item.title, item)"
              >{{ item.button_zi }}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="tankuang_bg">
        <el-dialog :visible="showJZ" :center="true" @close="Close()">
          <div>
            <div class="content_k">
              <p class="content_k_title">讲座报名</p>
              <ul>
                <li class="input_bg">
                  <label for>讲&nbsp;&nbsp;&nbsp;座</label>
                  <input v-model="jiangzuo_title" type="text" />
                </li>
                <li class="input_bg">
                  <label for>姓&nbsp;&nbsp;&nbsp;名</label>
                  <input type="text" v-model="name" />
                </li>
                <li class="input_bg">
                  <label for>电&nbsp;&nbsp;&nbsp;话</label>
                  <input type="text" v-model="realMobile" />
                </li>
                <li class="input_bg">
                  <label for>邮&nbsp;&nbsp;&nbsp;箱</label>
                  <input type="text" v-model="email" />
                </li>

                <li class="yanzhengma">
                  <label for>验证码</label>
                  <input type="text" v-model="yzm" />
                  <div
                    class="ValidCode disabled-select"
                    style="height:50px;width:100px"
                    @click="refreshCode"
                  >
                    <span
                      v-for="(item, index) in codeList"
                      :key="index"
                      :style="getStyle(item)"
                    >{{ item.code }}</span>
                  </div>
                  <!-- <div class="shuzi" v-html="toyzm1"></div> -->

                  <span class="tip" @click="refreshCode">看不清 换一张</span>
                </li>
              </ul>
              <p class="btn" @click="submit()">点击完成</p>
            </div>
          </div>
        </el-dialog>
      </div>
      <div id="page">
        <el-pagination
          v-if="totalRow != 0"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :pager-count="5"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="this.totalRow"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { JudgeLogin } from "../../api/login";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      codeList: [],
      yzm: "",
      name: "",
      active: "",
      realMobile: "",
      email: "",
      year: "",
      sfz: "",
      hd_title: "",
      time: "",
      xiazai1: "",
      xiabiao: "", //活动id
      showJZ: false,
      btn_show: true,
      yuyueId: [], //详情页对应的id
      productList: [], //所有数据
      jiangzuo_title: "",
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 3, // 每页显示数量
      currentPageData: [],
      totalRow: 0,
    };
  },

  mounted() {
    this.setCurrentPageData();
    this.createdCode();
  },
  components: {
    // hdtankuang:hdtankuang
  },
  props: ["id"],
  methods: {
    ...mapActions(["isShow"]),
    // 验证码
    refreshCode() {
      this.createdCode();
    },
    createdCode() {
      const len = 4;
      const codeList = [];
      const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789";
      const charsLen = chars.length;

      // 生成
      for (let i = 0; i < len; i++) {
        const rgb = [
          Math.round(Math.random() * 220),
          Math.round(Math.random() * 240),
          Math.round(Math.random() * 200),
        ];
        codeList.push({
          code: chars.charAt(Math.floor(Math.random() * charsLen)),
          color: `rgb(${rgb})`,
          fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
          padding: `${[Math.floor(Math.random() * 10)]}px`,
          transform: `rotate(${
            Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)
          }deg)`,
        });
      }
      // 指向
      this.codeList = codeList;

      // 将当前数据派发出去
      this.$emit("update:value", codeList.map((item) => item.code).join(""));
    },
    getStyle(data) {
      return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`;
    },

    tankuang(id, item, btn) {
      if (btn.button_zi != "立即报名") return;
      this.xiabiao = id;
      this.jiangzuo_title = item;
      this.yzm = "";
      this.createdCode();
      JudgeLogin(this).then((res) => {
        if (res.code != "UnLogin" && res.email != "") {
          this.showJZ = true;
          this.name = res.info.name;
          this.realMobile = res.info.realMobile;
          this.email = res.info.email;
        }
      });
    },

    Close() {
      this.showJZ = false;
    },
    // 预约
    submit() {
      JudgeLogin(this).then((res) => {
        if (res.code != "UnLogin" && res.email != "") {
          let active = this.active;
          let yzm = this.yzm;
          let num = /^[1]([3-9])[0-9]{9}$/;
          let str = [];
          this.codeList.forEach((item) => {
            str.push(item.code);
          });
          let arr = str.join(""); //按照(什么方式)空格拼接
          if (yzm.toLowerCase() != arr.toLowerCase()) {
            this.$message({
              message: "验证码错误",
              type: "error",
              duration: 1000,
              offset: 320,
            });
            (this.yzm = ""), this.createdCode();
            return;
          }

          this.$api
            .get(`${this.zs}/wenbo/jiangzuo/apply?id=${this.xiabiao}`)
            .then((res) => {
              (this.yzm = ""), this.createdCode();
              if (res.data.success == true) {
                this.$message({
                  message: "讲座预约成功",
                  type: "success",
                  duration: 1000,
                  offset: 320,
                });
                this.setCurrentPageData();

                this.showJZ = false;
              } else {
                this.$message({
                  message: res.data.msgDetail,
                  type: "error",
                  duration: 1000,
                  offset: 320,
                });
                this.showJZ = false;
              }
            });
        }
      });
    },
    more(item) {
      this.$router
        .push({
          path: `/huodongyugao/wenbojiangzuodetail`,
          query: {
            orderId: "文博讲座",
            balance: item.balance,
            id: item.id,
            title: item.title,
            appEndDate: item.appEndDate,
            appStartDate: item.appStartDate,
          },
        })
        .catch((err) => {
          err;
        });
    },
    setCurrentPageData() {
      this.$api
        .get(
          `${this.tableList}wenbojiangzuo-${this.currentPage}-${this.pageSize}`
        )
        .then((res) => {
          // console.log(res, 2222);
          // // 计算一共有几页
          this.totalRow = res.data.page.totalRow;
          let self = this;
          res.data.page.list.forEach((item) => {
            this.$api
              .get(`${this.zs}/wenbo/jiangzuo/balance/count?id=${item.id}`)
              .then((res) => {
                self.$set(item, "balance", res.data.data.balance);
                self.$set(item, "applyEndDates", res.data.data.applyEndDates);
                self.$set(
                  item,
                  "applyStartDates",
                  res.data.data.applyStartDates
                );

                self.$set(item, "startDates", res.data.data.startDates);
                self.$set(item, "endDates", res.data.data.endDates);
                self.$set(item, "sumCount", res.data.data.sumCount);
                self.$set(item, "apply", res.data.data.apply);
                self.$set(item, "appStartDate", res.data.data.appStartDate);
                self.$set(item, "appEndDate", res.data.data.appEndDate);
                //按钮里面的字
                // console.log(item.appStartDate, item.apply);
                if (item.appStartDate == false && item.appEndDate == true) {
                  self.$set(item, "button_zi", "报名未开始");
                } else if (
                  item.appStartDate == true &&
                  item.appEndDate == true
                ) {
                  self.$set(item, "button_zi", "立即报名");
                } else if (item.balance <= 0) {
                  self.$set(item, "button_zi", "讲座已无票");
                } else {
                  self.$set(item, "button_zi", "报名已结束");
                }
              });
          });

          this.currentPageData = res.data.page.list;
        });
    },
    handleCurrentChange(val) {
      if (val != this.currentPage) {
        this.currentPage = val;
      }

      // this.page = val;
      this.setCurrentPageData(
        `${this.tableList}wenbojiangzuo${this.currentPage}-${this.pageSize}`
      );
    },
  },
};
</script>
<style scoped>
ul,
p,
li {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.year {
  display: flex;
}

.lz li {
  display: flex;
  box-sizing: border-box;
  padding: 20px;
  justify-content: space-between;
  margin-bottom: 45px;
  background: #f5f5f5;
}
.lz_left {
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
}

.lz_right {
  width: 600px;
  box-sizing: border-box;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.title1 {
  color: #333333;
  font-size: 20px;
  margin-bottom: 10px;
  cursor: pointer;
}
.place {
  height: 150px;
  font-size: 18px;
  line-height: 35px;
  color: #666666;
}
.gray {
  font-size: 16px;
  margin-bottom: 10px;
  align-self: flex-end;
  cursor: pointer;
  background: #bebebe;
  color: white;
  width: 160px;
  height: 40px;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
}
.more {
  font-size: 16px;
  margin-bottom: 10px;
  align-self: flex-end;
  cursor: pointer;
  background: #0000ff;
  color: white;
  width: 160px;
  height: 40px;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
}
.content1 {
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #666666;
}
.table {
  margin-bottom: 100px;
  min-height: 400px;
}
/* fenye */
#page {
  text-align: center;
  margin-bottom: 85px;
}
#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 30px;
  height: 30px;
  border-radius: 2px;
}
#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}
#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}
#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
/* tk */
.tankuang_bg .content_k {
  width: 565px;
  text-align: center;
  padding-bottom: 40px;
}
.tankuang_bg >>> .el-dialog {
  width: 550px;
}
.tankuang_bg >>> .el-dialog--center .el-dialog__body {
  padding: 0px;
  width: 460px;
}
.content_k_title {
  margin-bottom: 41px;
  font-size: 24px;
}
.content_k ul {
  margin: auto;
}
.content_k li {
  margin-bottom: 40px;
}
.content_k .input_bg input {
  outline: none;
  width: 350px;
  height: 33px;
  border: none;
  box-sizing: border-box;
  padding-left: 20px;
  background: #f3f3f3;
}
.content_k li label {
  margin-right: 50px;
  font-size: 18px;
}

.yanzhengma {
  display: flex;
  box-sizing: border-box;
  padding: 0 45px;
  justify-content: space-between;
  margin-bottom: 55px;
}
.yanzhengma p {
  width: 350px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.yanzhengma input {
  width: 100px;
  height: 35px;
  margin-right: 10px;
}
.shuzi {
  width: 60px;
  height: 35px;
  background: cadetblue;
  margin-right: 10px;
}
.btn {
  background: url("../../assets/image/ljbm.png") no-repeat;
  width: 375px;
  height: 60px;
  text-align: center;
  margin: auto;
  line-height: 60px;
  cursor: pointer;
  color: white;
  font-size: 18px;
}
</style>
